<template>
  <div id="estimate">
    <magic-header titleName="预估费用"></magic-header>
    <article class="content">
      <section v-if="services && services.cartItems.length > 0">
        <div class="title">
          <span>服务项目</span>
        </div>
        <div class="list">
          <div v-for="(item, index) of services.cartItems" :key="index">
            <span class="label">{{item.product.name}}</span>
            <span class="price">{{'¥'+item.product.price+'×'+item.quantity}}</span>
          </div>
        </div>
      </section>
      <hr color="#929292">
      <section v-if="couponCodes && couponCodes.length > 0">
        <div style="position:relative; height:200px; overflow:auto">
          <div class="title">
            <span>商家优惠</span>
          </div>
          <div class="list">
            <div v-for="(item, index) of couponCodes" :key="index">
              <icar-radio v-tap:prevent="{methods:setCouponIndex, index:index}" iconClass="icon-radio" labelClass="label-radio" :label="item.coupon.name" :nativeValue="index" v-model="couponIndex"></icar-radio>
              <span class="price">{{'- ¥'+item.coupon.amount}}</span>
            </div>
            <!-- 优惠(除优惠券外的优惠价格) -->
            <div>
              <span class="label">其他优惠</span>
              <span class="price">{{'- ¥'+noCouponPrice}}</span>
            </div>
          </div>
        </div>
      </section>
      <hr color="#929292" v-if="couponCodes && couponCodes.length > 0">
      <section>
        <div class="title total-price">
          <span>预计总费用</span>
          <span>{{price}}</span>
        </div>
        <div class="list">

        </div>
      </section>
    </article>
  </div>
</template>

<script>
// vuex
import appointStore from "services/appointment/appoint";
// components
import magicHeader from "components/magicHeader";
import icarRadio from "components/radio/radio";
// services
import { getEstimatePrice, CalculateOrder } from "services/appointment/appoint";
export default {
  components: { magicHeader, icarRadio },
  data() {
    return {
      services: [],
      couponCodes: [],
      couponIndex: 0,
      price: 0,
      noCouponPrice: 0
    };
  },
  methods: {
    init() {
      this.services = appointStore.getters.getServices;
      this.couponCodes = appointStore.getters.getCouponCodes;
      this.couponIndex = appointStore.getters.getCouponIndex;
      this.calculateOrder(0)
      this.calculateOrder()
    },
    setCouponIndex(params) {
      if (this.couponIndex != params.index) {
        this.couponIndex = params.index;
      } else {
        this.couponIndex = -1;
      }
    },
    // 计算订单价格
    //type 0-商家优惠
    calculateOrder(type) {
      CalculateOrder.bind(this)(this.getCalculateReq(type), resp => {
        let couponIndex = appointStore.getters.getCouponIndex
        if (type == 0) {
          this.noCouponPrice = resp.discount
        } else {
          // 实际支付的价格
          this.price = resp.amountPaid < 0 ? 0 : resp.amountPaid;
        }
      })
    },
    // type 0-商家优惠
    getCalculateReq(type) {
      let couponIndex = appointStore.getters.getCouponIndex
      let req = type == 0 ? {
        "cartItems": this.services.cartItems,
      } : {
          "cartItems": this.services.cartItems,
          "couponIds": this.couponCodes && this.couponCodes.length > 0 && couponIndex > -1 ? [this.couponCodes[couponIndex].coupon.id] : null,
        }
      return req;
    },
  },
  watch: {
    couponIndex(val) {
      appointStore.commit("setCouponIndex", Number(val));
      this.calculateOrder()
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0;
  section {
    padding: 20px;
    min-height: 150px;
    .total-price {
      display: flex;
      justify-content: space-between;
    }
    .title {
      font-size: 15px;
    }
    .list {
      padding: 10px 20px;
      div {
        display: flex;
        justify-content: space-between;
        line-height: 20px;
      }
    }
  }
}
</style>
<style lang="scss" >
.icon-radio {
  height: 16px !important;
  img {
    width: 20px;
  }
}

.label-radio {
  font-size: 12px;
}
</style>
